/*
 * 登录页面
 */
// 引入当前页面css
require("../css/login.css");

document.ready(function () {
    const userId = document.querySelector("#userId");
    const pwd = document.querySelector("#pwd");
    const btn = document.querySelector(".btn");

    let userFlag = false;
    let pwdFlag = false;

    function checkEmpty(a, o, str) {
        o.addEventListener("blur", function () {

            // 判断用户是否输入内容 内容为空 //!显示警告 并结束函数
            if (o.value.trim() == "") {
                this.style.borderColor = "red";
                o.value = '';
                console.log(str);
                o.nextElementSibling.innerHTML = "内容不能为空！"
                return;
            }
            // 当验证的是账号的时候 验证格式是否正确 最后保留验证结果
            if (a === "userId") {
                //todo 获取正则验证的结果
                userFlag = $check.checkPhone(o.value);
                // console.log("手机号的验证结果是：", phoneFlag);
                if (userFlag) {
                    this.style.borderColor = "green";
                    o.nextElementSibling.innerHTML = "";
                } else {
                    this.style.borderColor = "red";
                    console.log(123);
                    o.nextElementSibling.innerHTML = "请输入正确的账号！";
                }
                // 当验证的是密码的时候 验证格式是否正确 最后保留验证结果
                // 并验证两次密码是否输入一致
            } else if (a === "pwd") {
                //todo 获取正则验证的结果
                pwdFlag = $check.checkPwd(o.value)
                if (pwdFlag) {
                    this.style.borderColor = "green";
                    o.nextElementSibling.innerHTML = "";

                } else {
                    this.style.borderColor = "red";
                    o.nextElementSibling.innerHTML = "密码为6-15的 字母 数字 下划线";
                }

            }
        })
    }

    checkEmpty("userId", userId, "手机账号不能为空！")
    checkEmpty("pwd", pwd, "密码不能为空！")


    btn.addEventListener("click", function () {
        userId.focus();
        userId.blur();

        pwd.focus();
        pwd.blur();

        if (userFlag && pwdFlag) {
            // 发送 请求判断输入的账号密码 正确就跳转
            window.$http.post("/users/login", {
                account: userId.value,
                password: pwd.value
            }, function (res) {
                // 正确
                if (res.status === 0) {
                    // 保存登录成功的账号和密码  并跳转到首页
                    window.localStorage.setItem("token", res.data.token);
                    window.localStorage.setItem("user", JSON.stringify(res.data.user));
                    // 提示框
                    window.$check.toast(res.status, res.msg, function () {
                        window.location.href = "index.html";
                    });
                    // 错误
                } else {
                    window.$check.toast(res.status, res.msg);
                }
            })
        }
    })
})
